import { getRandom, randomColor } from "../util/randomColor";

var divContainer = document.getElementById('divContainer');
var divCenter = document.getElementById('divCenter');

export default function (n ,isPrime) {
    var span = document.createElement('span');
    if (isPrime) {
        var color = randomColor();
        span.style.color = color;
        createCenterPrimeNumber(n, color);
    }
    span.innerText = n;
    divContainer.appendChild(span);
    createCenterNumber(n);
}

function createCenterNumber(n) {
    divCenter.innerText = n;
}
// 生成中间区域的数字
function createCenterPrimeNumber(n, color) {
    var div = document.createElement('div');
    div.className = 'center';
    div.innerText = n;
    div.style.color = color;
    document.body.appendChild(div);
    /**
     * 加入div后，强制页面重新渲染
     */
    getComputedStyle(div).left; // 只要读取某个元素的位置或尺寸信息，则会导致浏览器重新渲染（reflow）
    div.style.transform = `translate(${getRandom(-200,200)}px, ${getRandom(-200,200)}px)`
    div.style.opacity = 0;
}